<template>
  <div class="form-wrap">
    <el-form
      size="large"
      :model="loginData"
      ref="form"
      label-width="80px"
      :inline="false"
    >
      <el-form-item label-width="0">
        <el-input
          :prefix-icon="User"
          v-model="loginData.username"
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>
      <el-form-item label-width="0">
        <el-input
          :prefix-icon="Unlock"
          v-model="loginData.password"
          type="password"
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>
      <el-form-item label-width="0">
        <div class="valid-code-wrap">
          <el-input
            :prefix-icon="More"
            v-model="loginData.code"
            placeholder="请输入验证码"
          ></el-input>
          <img
            id="valid-code"
            :src="`data:image/png;base64,${validCode}`"
            alt="验证码图片"
            @click="getVerificationCode"
          />
        </div>
      </el-form-item>
      <el-form-item label-width="20">
        <el-button type="primary" @click.enter="doLogin">登录</el-button>
        <router-link to="/register">前往注册</router-link>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { login, getValidCode } from "@/api/user";
import { LoginData } from "@/api/user/types/data";
import { VerifyRes } from "@/api/user/types/res";
import { StateCode } from "@/enums/apiResult";
import { onMounted, reactive, ref } from "vue";
import { User, Unlock, More } from "@element-plus/icons-vue";
import { useUserStore } from "@/store/modules/userStore";
import { router } from "@/router";
import { ElLoading } from "element-plus";

const userStore = useUserStore();

const loginData = reactive<LoginData>({
  username: "admin",
  password: "123456",
  code: undefined,
});

let validCode = ref<string>();

const doLogin = () => {
  //发起登录请求时显示加载中，因为后台要生成验证码和token请求耗时比较久
  const elLoadingInstance = ElLoading.service({
    body: true,
    background: "#ffffff33",
  });

  login(loginData)
    .then(async (res) => {
      elLoadingInstance.close();
      userStore.setUserInfo(res);
      //跳转到首页
      router.replace("/");
    })
    .catch((err) => {
      elLoadingInstance.close();
      //如果参数检验异常则更新验证码
      if (err === StateCode.ERROR_PARAMS_SERVICE) {
        getVerificationCode();
        loginData.code = undefined;
      }
    });
};

const getVerificationCode = async () => {
  const res: VerifyRes = await getValidCode();
  validCode.value = res.img;
};

onMounted(() => {
  getVerificationCode();
});
</script>

<style scoped>
.form-wrap {
  width: 100%;
  height: 100%;
  background-image: url("../assets/login-background.webp");
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.form-wrap .el-form {
  width: 450px;
  background-color: #e6e8ebd3;
  padding: 20px 20px 0 20px;
  border-radius: 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.form-wrap .el-form .el-form-item {
  width: 80%;
}

.form-wrap .el-form .el-form-item .el-button {
  width: 180px;
  margin-right: 20px;
}

.valid-code-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  flex: 1;
}

.valid-code-wrap #valid-code {
  width: 150px;
  height: 40px;
}

.valid-code-wrap .el-input {
  width: 170px;
}
</style>
